<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.3.1.min.js"></script>
    <script src="FormBuilder.js"></script>
</head>

<body>
    <form id="form">

    </form>
    <script>
        var elements = [{
            tag: 'input',
            text: '姓名',
            attr: {
                type: 'text',
                name: 'user'
            }
        }, {
            tag: 'input',
            text: '性别',
            attr: {
                type: 'radio',
                name: 'gender'
            },
            option: {
                m: '男',
                w: '女'
            }
        }, {
            tag: 'input',
            text: '爱好',
            attr: {
                type: 'checkbox',
                name: 'hobby[]'
            },
            option: {
                swimming: '游泳',
                reading: '读书',
                running: '跑步'
            }
        }, {
            tag: 'select',
            text: '住址',
            attr: {
                name: 'area'
            },
            option: {
                '': '--请选择--',
                bj: '北京',
                sh: '上海',
                sz: '深圳'
            }
        }, {
            tag: 'textarea',
            text: '自我介绍',
            attr: {
                name: 'introduce',
                cols: '50',
                rows: '5'
            }
        }, {
            tag: 'input',
            attr: {
                type: 'submit',
                value: '提交'
            }
        }];
        document.getElementById('form').innerHTML = new FormBuilder(elements).create();
    </script>

</body>

</html>